import React from 'react';
import { inject,observer } from 'mobx-react';
import * as mobx from 'mobx';
import './index.less';
import { getAntd,getEcCom,getLabel } from '../../../util/convert';

@inject('rejectStore')
@observer
export default class Main extends React.Component{
    componentDidMount(){
        const { rejectStore } = this.props;
        rejectStore.doInit();
    }
    render(){
        const { Button,message } = getAntd();
        const { WeaTable,WeaSearchGroup,WeaHelpfulTip,WeaDialogFooter,WeaRightMenu,WeaFormItem,WeaSelect,WeaBrowser } = getEcCom();
        const { rejectStore } = this.props;
        const { rejectNodeList=[],remindNodeList=[],isSubmitDirectOptions=[],showAllRejectNodeOperators } = rejectStore;
        return (
            <div className="wf-reject-choose">
                <div className="wf-reject-choose-content">
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@qgh9yr`} {...this.getMoreBtns()}>
                    {
                        rejectNodeList.length > 0 && this.renderNodeTable()
                    }
                    {
                        remindNodeList.length > 0 && this.renderRemindTable()
                    }
                    {
                        isSubmitDirectOptions.length > 0 && this.renderSubmitDirectSelect()
                    }
                    </WeaRightMenu>
                </div>
                <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@0069er`} buttons={this.getButtons()} moreBtn={this.getMoreBtns()} />
            </div>
        )
    }
    renderNodeTable(){
        const { Button,message } = getAntd();
        const { WeaTable,WeaSearchGroup,WeaHelpfulTip,WeaDialogFooter,WeaRightMenu,WeaFormItem,WeaSelect,WeaBrowser } = getEcCom();
        const { rejectStore } = this.props;
        const { rejectNodeList,result,rejectNodeOperators,showAllRejectNodeOperators,setShowAllRejectNodeOperators } = rejectStore;
        const columns = [
            {
                title: <span>{getLabel(15070,'节点名称')}</span>,
                key: "nodename",
                dataIndex: "nodename",
                width: "45%"
            },
            {
                title: <span>{getLabel(99,'操作者')}</span>,
                key: "operator",
                dataIndex: "operator",
                width: "55%"
            }
        ];
        let datas = [];
        rejectNodeList && rejectNodeList.map(item =>{
            let row = mobx.toJS(item);
            let operators = mobx.toJS(rejectNodeOperators[row.key]);
            let show = showAllRejectNodeOperators[row.key];
            row = {...row, 
                operator : this.getOperatorCom(operators, show, () => {
                    setShowAllRejectNodeOperators(row.key);
                })
            }
            if(row.key.indexOf("_1") > -1 || row.key.indexOf("_3") > -1){
                row.nodename = <div><span>{row.nodename}</span>
                        <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@v2p8ia@${row.key}`}
                            title={getLabel(126503,"将流程退回至上一次分叉后的状态，即到达上一次所有走过分支的第一个节点")}
                        /></div>;
            }else if(row.key.indexOf("_2") > -1){
                row.nodename = <div><span>{row.nodename}</span>
                        <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@fn3ars@${row.key}`}
                            title={getLabel(126504,"将流程退回至上一次分叉合并前的状态，即到达上一次所有走过分支的最后一个节点")}
                        /></div>;
            }
            datas.push(row);
        });
        const rowSelection = {
            type: "radio",
            selectedRowKeys: [result.rejectNodeKey],
            onChange(selectedRowKeys, selectedRows) {
                const { key } = selectedRows && selectedRows[0] || {};
                rejectStore.appendResult({rejectNodeKey:key});
            }
        };
        return (
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4ij3dz`} className="notitleLineGroup" needTigger={true} title={getLabel(26436,"请选择退回节点")} showGroup={true}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@i5uv38`}
                    columns={columns}
                    dataSource={datas}
                    rowSelection={rowSelection}
                    pagination={false}
                />
            </WeaSearchGroup>
        )
    }
    renderRemindTable(){
        const { Button,message } = getAntd();
        const { WeaTable,WeaSearchGroup,WeaHelpfulTip,WeaDialogFooter,WeaRightMenu,WeaFormItem,WeaSelect,WeaBrowser } = getEcCom();
        const { rejectStore } = this.props;
        const { remindNodeList,result,remindNodeOperators,showAllRemindNodeOperators,setShowAllRemindNodeOperators } = rejectStore;
        const remindNodeid = result.remindNodeid || "";
        const columns = [
            {
                title: <span>{getLabel(15070,'节点名称')}</span>,
                key: "nodename",
                dataIndex: "nodename",
                width: "45%"
            },
            {
                title: <span>{getLabel(99,'操作者')}</span>,
                key: "operator",
                dataIndex: "operator",
                width: "55%"
            }
        ];
        let datas = [];
        remindNodeList && remindNodeList.map( item => {
            let row = mobx.toJS(item);
            let operators = mobx.toJS(remindNodeOperators[item.key]);
            let show = showAllRemindNodeOperators[item.key];
            row = {...row, 
                operator : this.getOperatorCom(operators, show, () => {
                    setShowAllRemindNodeOperators(item.key);
                })
                }
            datas.push(row);
        })
        const rowSelection = {
            selectedRowKeys: remindNodeid.split(","),
            onChange(selectedRowKeys, selectedRows) {
                let keys = "";
                selectedRows && selectedRows.map(item =>{
                    keys += "," + item.key;
                });
                rejectStore.appendResult({remindNodeid:keys});
            }
        };
        return (
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@337h7t`} needTigger={true} className="notitleLineGroup" title={getLabel(24465,'提醒节点')} showGroup={true}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@9s3qx3`} 
                    columns={columns}
                    dataSource={datas}
                    rowSelection={rowSelection}
                    pagination={false}
                />
            </WeaSearchGroup>
        )
    }
    renderSubmitDirectSelect() {
        const { Button,message } = getAntd();
        const { WeaTable,WeaSearchGroup,WeaHelpfulTip,WeaDialogFooter,WeaRightMenu,WeaFormItem,WeaSelect,WeaBrowser } = getEcCom();
        const { rejectStore } = this.props;
        const { isSubmitDirectOptions } = rejectStore;
        return (
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9owy77`} needTigger={true} title={getLabel(384066,'退回后再提交的处理方式')} showGroup={true} center={true}>
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@054r3o`}
                    label = {getLabel(386382, "请选择")}
                    labelCol = {{span: 9}}
                    wrapperCol={{span: 15}}
                    >
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@a4axws`}
                            options={mobx.toJS(isSubmitDirectOptions)}
                            detailtype={3}
                            onChange={(v)=>{
                                rejectStore.appendResult({isSubmitDirect:v});
                            }}
                        />
                </WeaFormItem>
            </WeaSearchGroup>
        )
    }

    getButtons(){
        const { Button,message } = getAntd();
        const { WeaTable,WeaSearchGroup,WeaHelpfulTip,WeaDialogFooter,WeaRightMenu,WeaFormItem,WeaSelect,WeaBrowser } = getEcCom();
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h8obgl@confirm`} type='primary' onClick={this.doConfirm}>{getLabel(83446,'确定')}</Button>);
        return buttons;
    }
    getMoreBtns(){
        let btns = [];
        btns.push({
            key: '0',
            icon:  <i className='icon-coms-Preservation'/>,
            content: getLabel(83446,'确定'),
            onClick: key => this.doConfirm(),
        });
        return {datas:btns};
    }
    doConfirm = () => {
        const { rejectStore } = this.props;
        const { rejectNodeList,result } = rejectStore;
        if(rejectNodeList.length > 0 && !result.rejectNodeKey){
            message.warning(getLabel(26436,"请选择退回节点"));
            return;
        }
        rejectStore.confirmEvent(mobx.toJS(result));
    }

    //渲染操作者列
    getOperatorCom(operators = [], show, func) {
        const { Button,message } = getAntd();
        const { WeaTable,WeaSearchGroup,WeaHelpfulTip,WeaDialogFooter,WeaRightMenu,WeaFormItem,WeaSelect,WeaBrowser } = getEcCom();
        let showList = (operators.length <= 6 || show) ? operators : operators.slice(0,6);
        return (
            <div className="operators">
                    <div className="browserDiv">
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@cw21oz`} type="17" isSingle={false} replaceDatas={showList} viewAttr="1"></WeaBrowser>
                    </div>
                    {operators.length > 5 &&
                        <span 
                            className="iconSpan" 
                            title={show ? getLabel(26985, '收起') : getLabel(20234, '显示全部')}
                            onClick={() => {
                                func && func();
                            }}
                        >
                            <em className={show ? "icon-coms-up" : "icon-coms-down"}></em>
                        </span>
                    }
            </div>
        )
    }
}